<template>
  <div class="paycount-container">
    <div class="filterData">
      <el-radio-group v-model="filterRadio">
        <el-radio
          v-for="v in radioOptions"
          :key="v.label"
          :label="v.label"
          @change="changeRadio"
          >{{ v.name }}</el-radio
        >
      </el-radio-group>
    </div>
    <div id="paycompanycount" class="paycompanycount"></div>
  </div>
</template>

<script>
export default {
  name: 'payCount',
  data() {
    return {
      filterRadio: 'paysecurity',
      name: '社保缴纳企业数',
      radioOptions: [
        {
          label: 'paysecurity',
          name: '社保缴纳企业数',
          url: 'api-c/company/risk/stats/base/social/data',
        },
        {
          label: 'paytaxes',
          name: '纳税企业数',
          url: 'api-c/company/risk/stats/base/fax/data',
        },
      ],
    }
  },
  created() {},
  mounted() {
    this.getData('api-c/company/risk/stats/base/social/data')
  },
  methods: {
    changeRadio() {
      const findOne = this.radioOptions.find(
        (v) => v.label === this.filterRadio
      )
      this.name = findOne.name
      this.getData(findOne.url)
    },
    getData(url) {
      return this.axios({
        method: 'post',
        url,
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            const monthList = result.map(
              (v) => v.belongDateStr || v.startDateStr
            )
            const valueList = result.map((v) =>
              v.socialSecurityNum || v.socialSecurityNum === 0
                ? v.socialSecurityNum
                : v.normalFaxNum
            )
            this.draw(monthList, valueList)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    draw(monthList, valueList) {
      this.$nextTick(() => {
        this.chartMonth = this.$echarts.init(
          document.getElementById('paycompanycount')
        )
        var option = {
          color: ['#53FFAC'],
          tooltip: {
            trigger: 'axis', // 坐标轴触发
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            top: '8%',
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: monthList,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff',
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              // min: 5,
              splitNumber: 5,
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff',
                },
              },
              splitLine: {
                lineStyle: {
                  color: '#65DEFC',
                  width: 0.5,
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: this.name,
              type: 'bar',
              barWidth: '40%',
              data: valueList,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: '#0F6DC5', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#50BEFF', // 100% 处的颜色
                      },
                    ],
                    false
                  ),
                },
              },
            },
          ],
        }
        this.chartMonth.setOption(option)
        window.addEventListener('resize', () => {
          this.chartMonth.resize()
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.paycount-container {
  width: 100%;
  height: calc(100% - 52px);
  .filterData {
    text-align: center;
  }
  .paycompanycount {
    height: calc(100% - 28px);
    margin-top: 10px;
  }
}
/deep/.el-radio {
  margin-right: 8px !important;
  .el-radio__label {
    padding-left: 5px !important;
    font-size: 12px;
    color: #fff;
  }
  .el-radio__inner {
    width: 12px;
    height: 12px;
    border: 1px solid #7a8b9b;
    background-color: transparent;
    &::after {
      background-color: #50beff;
    }
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #50beff;
    background: transparent;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #50beff;
  }
}
</style>
